<template>
  <div class="app-container">
    <el-form ref="courseForm" :model="course" :rules="rules" label-width="120px">
      <el-form-item label="课程名:" prop="name">
        <el-input v-model.trim="course.name" placeholder="请输入课程名" />
      </el-form-item>
      <el-form-item label="教师姓名:" prop="teacher">
        <el-input v-model.trim="course.teacher" placeholder="请输入教师姓名" />
      </el-form-item>
      <el-form-item label="上课时间:" prop="upTime">
        <div class="block">
          <el-date-picker
            v-model.trim="course.upTime"
            style="width: 100%"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择上课时间"
            align="left"
          />
        </div>
      </el-form-item>
      <el-form-item label="下课时间:" prop="downTime">
        <div class="block">
          <el-date-picker
            v-model.trim="course.downTime"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="请选择下课时间"
            align="left"
          />
        </div>
      </el-form-item>
      <el-form-item label="所属实验分室:" prop="labId">
        <el-select v-model="course.labId" style="width: 100%" placeholder="请选择实验分室">
          <el-option v-for="item in labSub" :key="item.id" :label="item.labName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="default" @click="$router.go(-1)">返回</el-button>
        <el-button type="info" @click="reset">重置</el-button>
        <el-button type="primary" @click="saveSourse">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入api接口定义的js文件
import labSubApi from '@/api/labSub'
import courseApi from '@/api/course'
export default {
  data() {
    return {
      // 定义表单绑定对象
      course: {
        name: '',
        teacher: '',
        upTime: '',
        downTime: '',
        labId: ''
      },
      labSub: [],
      isEdit: false,
      rules: {
        name: [{ required: true, message: '课程名不能为空', trigger: 'blur' }],
        teacher: [{ required: true, message: '老师不能为空', trigger: 'blur' }],
        upTime: [
          {
            required: true,
            message: '请选择上课时间',
            trigger: ['blur, change']
          }
        ],
        downTime: [
          {
            required: true,
            message: '请选择下课时间',
            trigger: ['blur, change']
          }
        ],
        labId: [{ required: true, message: '请选择实验室', trigger: ['blur, change'] }]
      }
    }
  },
  created() {
    const id = this.$route.params.id
    this.isEdit = !!id

    if (this.isEdit) {
      this.getById(id)
    }

    this.getLabSub()
  },
  methods: {
    // 查询所有分室信息
    getLabSub() {
      labSubApi.getList().then((response) => {
        this.labSub = response.data
      })
    },

    // 更加id查询
    getById(id) {
      courseApi.getById(id).then((res) => {
        this.course = res.data
      })
    },

    // 添加
    saveSourse() {
      this.$refs['courseForm'].validate((valid) => {
        if (valid) {
          const apiCall = this.isEdit ? courseApi.update(this.course) : courseApi.save(this.course)

          apiCall.then((res) => {
            const message = this.isEdit ? '修改成功' : '添加成功'
            this.$message.success(message)
            this.$router.push({ path: '/course/index' })
          })
        }
      })
    },

    // 重置
    reset() {
      if (this.isEdit) {
        this.getById(this.$route.params.id)
      }
      this.$refs['courseForm'].resetFields()
    }
  }
}
</script>

<style></style>
